<template>
    <div class="large-right2 large-panel" @click="openChild">
        <div class="top-title">
            <img class="title-ico" src="@/assets/large/panel-title-ico.png" />
            医生资源
        </div>
        <div class="table-box large-table">
            <a-table bordered :loading="loading" :rowKey="(item,i)=>'doctor_'+i" :columns="columns" :data-source="pageList"
                :pagination="false" :rowClassName="(record, index) => index % 2 === 0 ? 'even-row' : 'odd-row'">

            </a-table>
        </div>
        <Right2childVue :visible="childVisible" @closeModal="() => childVisible = false" v-if="childVisible"/>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import Right2childVue from "../child/right2child.vue";

@Component({
    name: "home",
    components: {Right2childVue},
})
export default class extends Vue {
    @Prop({ default: () => {} }) pageData!: any;
    @Watch("pageData")
    pageDataChange() {
        this.setPageData();
    }
    loading=false
    pageList: any[] = [];
    childVisible = false;
    openChild() {
        this.childVisible=true
    }

    mounted() {
        this.setPageData()
    }
    setPageData(){
        if (!this.pageData || !this.pageData.topDoctors) return;
        this.pageList=this.pageData.topDoctors
    }
    columns = [
        {
            align: "center",
            dataIndex: "doctorName",
            key: "doctorName",
            title: "医生姓名",
        },
        {
            align: "center",
            dataIndex: "organizationName",
            key: "organizationName",
            title: "所属机构",
        },
        {
            align: "center",
            dataIndex: "department",
            key: "department",
            title: "科室",
        },
        {
            align: "center",
            dataIndex: "consultCount",
            key: "consultCount",
            title: "咨询量",
        },
    ];
}
</script>
<style lang="scss">
.large-right2 {
    .top-title {
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #3ad3c1;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .title-ico {
        width: 30px;
        margin-right: 10px;
    }
}
</style>
